<template>
  <div class="exchangeBox">
    <el-steps
      :active="active"
      finish-status="success"
      :align-center="true"
      class="steps"
    >
      <el-step title="1.提交申请信息" />
      <el-step title="2.卖家审核" />
      <el-step title="3.完成" />
    </el-steps>
    <!-- order -->
    <div v-if="PageType !== 'ApplySales'">
      <div
        v-for="item in datas.oOrderDetails"
        :key="item.id"
        class="good"
      >
        <div class="imgBoxs">
          <img
            :src="item.DefaultImage"
            alt=""
          >
        </div>
        <div class="detail">
          <div class="tls">
            {{ item.cProductName }}
          </div>
          <div class="price">
            ￥{{ item.fSalePrice }}
          </div>
        <!-- <div class="dls">
          订单详情
        </div> -->
        </div>
      </div>
    </div>

    <div v-if="PageType === 'ApplySales'">
      <div class="good">
        <div class="imgBoxs">
          <img
            :src="order.DefaultImage"
            alt=""
          >
        </div>
        <div class="detail">
          <div class="tls">
            {{ order.cProductName }}
          </div>
          <div class="price">
            ￥{{ order.fSalePrice }}
          </div>
          <!-- <div class="dls">
            订单详情
          </div> -->
        </div>
      </div>
    </div>

    <div class="tabBox">
      <div class="tabR">
        <div
          v-for="(item, index) in titleList"
          :key="item.id"
          :class="{ active: titleIndex == index }"
          @click="selectedTitle(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div v-if="titleIndex == 0">
        <el-form
          :inline="false"
          :label-position="labelPosition"
          label-width=""
          class="demo-form-inline"
        >
          <el-form-item label="退款原因">
            <el-select
              v-model="reason"
              placeholder="请选择"
              @change="changeReason"
            >
              <el-option
                v-for="item in reasonList"
                :key="item.id"
                :label="item.reason"
                :value="item.reason"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="退款金额:">
            ￥{{ price.toFixed(2) }}
          </el-form-item>
          <!-- <el-form-item label="退货数量:">
            <el-select
              v-model="nums"
              placeholder="请选择"
              @change="changeNums"
            >
              <el-option
                v-for="item in num"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="退款说明:">
            <el-input
              v-model="desc"
              type="textarea"
              style="width:33.06rem;"
            />
          </el-form-item>
          <el-form-item label="上传凭证:">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i
                slot="default"
                class="el-icon-plus"
              />
              <div
                slot="file"
                slot-scope="{ file }"
              >
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  ><i class="el-icon-zoom-in" /></span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  ><i class="el-icon-download" /></span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  ><i class="el-icon-delete" /></span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
              >
            </el-dialog>
          </el-form-item>
        </el-form>
        <div
          class="subBtn"
          @click="submit(order)"
        >
          发表
        </div>
      </div>
      <div v-if="titleIndex == 1">
        <el-form
          :inline="false"
          :label-position="labelPosition"
          label-width=""
          class="demo-form-inline"
        >
          <el-form-item label="我的订单:">
            {{ order.cOrderNo }}
          </el-form-item>
          <el-form-item label="退货原因:">
            <el-select
              v-model="reason"
              placeholder="请选择"
              @change="changeReason"
            >
              <el-option
                v-for="item in reasonList"
                :key="item.id"
                :label="item.reason"
                :value="item.reason"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="退款金额:">
            ￥{{ price.toFixed(2) }}
          </el-form-item>
          <el-form-item label="退货数量:">
            <div style="display: flex">
              <el-input-number
                v-model="nums"
                :max="order.iQuantity"
                :min="1"
                @change="changeNums"
              />
              <div style="margin-left:1rem">
                最多{{ order.iQuantity }}件
              </div>
            </div>
          </el-form-item>
          <!-- <el-form-item label="退款说明:">
            <el-input
              v-model="desc"
              type="textarea"
              style="width:33.06rem;"
            />
          </el-form-item> -->
          <!-- <el-form-item label="快递公司:">
            <el-select
              v-model="reason"
              placeholder="请选择"
              @change="changeReason"
            >
              <el-option
                v-for="item in reasonList"
                :key="item.id"
                :label="item.reason"
                :value="item.reason"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号:">
            <el-input
              v-model="oNum"
              type="text"
              style="width:33.06rem;"
            />
          </el-form-item> -->
          <el-form-item label="上传凭证:">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i
                slot="default"
                class="el-icon-plus"
              />
              <div
                slot="file"
                slot-scope="{ file }"
              >
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  ><i class="el-icon-zoom-in" /></span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  ><i class="el-icon-download" /></span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  ><i class="el-icon-delete" /></span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
              >
            </el-dialog>
          </el-form-item>
          <el-form-item label="退款说明:">
            <el-input
              v-model="desc"
              type="textarea"
              style="width:33.06rem;"
            />
          </el-form-item>
        </el-form>
        <div
          class="subBtn"
          @click="submit(order)"
        >
          提交
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'right',
				reason: '',
				reasonList: [],
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
				active: 0,
				desc: '',
				num: 0,
				nums: 0,
				price: 500,
				orderNo: '',
				datas: '',
				id: '',
				titleList: [{
					id: 1,
					title: '我要退款(无需退货)'
				}, {
					id: 2,
					title: '我要退货'
				}],
				titleIndex: 0,
				order: {},
        Modify: '',
        cSaleReturnNo: '',
        PageType:'',
			};
		},
		mounted() {
      console.log('this.$route.query.Modify',this.$route.query.index, this.$route.query.Modify)
      if(this.$route.query.Modify) {
        this.orderNo = this.$route.query.orderNo;
        this.cSaleReturnNo = this.$route.query.cSaleReturnNo
        this.PageType = this.$route.query.PageType
        if (this.$route.query.PageType === 'ApplySales') {
          this.titleIndex = 1
          this.getDetail(this.orderNo, this.$route.query.index);
        } else {
          this.getDetail(this.orderNo, this.$route.query.index);
        }
      } else {
        this.orderNo = this.$route.query.orderNo;
        this.getDetail(this.orderNo, this.$route.query.index);
      }
      console.log('this.orderNo', this.orderNo)
			this.getReasonContentList();
		},
		methods: {
			changeReason() {
				console.log(this.reason);
			},
			changeNums() {
				console.log(this.reason);
			},
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleDownload(file) {
				console.log(file);
			},
			//切换
			selectedTitle(index) {
				this.titleIndex = index;
			},
			// 获取订单商品详情
			getDetail(orderNo,index) {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						cOrderNo: orderNo
					}
				};
				this.$api.person.getDetail(params).then(res => {
					if (res.code == 200) {
						console.log('获取订单商品详情',res.data);
						// this.datas = res.data;
						// this.id = res.data.oOrderDetails[index].id;
            this.getReturnDetail(res.data.oOrderDetails[index].id)
						// if (this.id != '') {
						// 	this.getReturnDetail();
						// }
					}
				});
			},
			// 获取退货商品详情
			getReturnDetail(id) {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						iDetailId: id
					}
				};
				this.$api.good.getReturnDetail(params).then(res => {
					if (res.code == 200) {
						console.log('我在着',res);
						this.order = res.data;
						if (res.data.cNextStatus == 'DELIVERGOODS') {
							this.num = 0;
						} else {
							this.num = res.data.iQuantity;
						}
						this.price = res.data.fCanReturnMoney;
					}
				});
			},
			//获取退货原因
			getReasonContentList() {
				let params = {
					token: localStorage.getItem('token')
				};
				this.$api.person.getReasonContentList(params).then(res => {
					if (res.code == 200) {
						console.log(res.data);
						this.reasonList = res.data;
					}
				});
			},
			//提交退货申请
			submit(order) {
        if (this.$route.query.Modify) {
          let params = {
            token: localStorage.getItem('token'),
            iDetailId: order.id,
            reason: this.reason,
            quantity: this.num,
            money: this.price,
            description: this.desc
          }
          console.log('提交退货申请',params, order)
          this.$api.person.save(params).then(res => {
            if (res.code == 200) {
              this.$router.push({
                path: `/person/returnList`
              });
            } else {
              this.$message.error(res.message);
            }
          })
        } else {
          let params = {
            token: localStorage.getItem('token'),
            data: {
              iDetailId: this.id,
              reason: this.reason,
              quantity: this.num,
              money: this.price,
              description: this.desc
            }
          };
          this.$api.good.saleReturns(params).then(res => {
            if (res.code == 200) {
              this.$router.push({
                path: `/person/storeConfirm`
              });
            } else {
              this.$message.error(res.message);
            }
          });
        }
				
			}
		}
	};
</script>

<style scoped lang="scss">
	.imgContain {
		width: 4.69rem;
		height: 4.69rem;
		background: rgba(255, 255, 255, 1);
		border: 0.06px solid rgba(227, 227, 227, 1);
	}

	.el-form-item {
		display: flex;
		flex-direction: row;
	}

	.subBtn {
		width: 13.75rem;
		height: 3rem;
		background: rgba(240, 64, 111, 1);
		color: #fff;
		text-align: center;
		line-height: 3rem;
		font-size: 1rem;
		margin-left: 4.5rem;
		margin-top: 2.88rem;
     cursor:pointer;//鼠标变小手
	}

	.exchangeBox {
		.tabBox {
			background-color: #fff;
			padding: 3rem;
      margin-bottom: 1.6rem;
			.tabR {
				color: #777;
				font-size: 0.88rem;
				display: flex;
				flex-direction: row;
				margin-bottom: 2.44rem;

				>div {
					margin-right: 2rem;
					padding-bottom: 1rem;
					cursor: pointer;

					&.active {
						color: #f0406f;
						border-bottom: 0.31rem solid #f0406f;
					}
				}
			}
		}

		.good {
			background-color: #fff;
			padding: 2rem 1.85rem;
			margin-top: 2.38rem;
			margin-bottom: 1rem;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-start;

			.imgBoxs {
				width: 17rem;
				height: 16.88rem;
				background: rgba(255, 255, 255, 1);
				border: 0.06px solid rgba(227, 227, 227, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 3.44rem;

				img {
					object-fit: contain;
					width: 98%;
					height: 98%;
				}
			}

			.detail {
				color: #666;

				.tls {
					font-size: 1rem;
					line-height: 1.88rem;
					padding-bottom: 2.56rem;
				}

				.price {
					font-size: 1.67rem;
					line-height: 3.14rem;
					padding-bottom: 3.13rem;
				}

				.dls {
					font-size: 1rem;
					line-height: 1.88rem;
					cursor: pointer;

					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
</style>
